<template>
    <el-container class="container">
        <el-header style="text-align:center">
            <nagivation />
        </el-header>
        <div style="display: flex;justify-content: center;">
            <div>
                <el-image style="height:200px;width:1000px" :src="src"></el-image>
            </div>
            <el-popover placement="top" width="300" v-if="visible">
                <p>你还没有关注他,点击关注</p>
                <div style="text-align: right; margin: 0">
                    <el-button size="mini" type="text" @click="visible = false">取消</el-button>
                    <el-button type="primary" size="mini" @click="visible = false">确定</el-button>
                </div>
                <el-button type="primary" slot="reference">关注</el-button>
            </el-popover>
            <el-popover placement="top" width="300" v-if="!visible">
                <p>你确定要取关吗</p>
                <div style="text-align: right; margin: 0">
                    <el-button size="mini" type="text" @click="visible = false">取消</el-button>
                    <el-button type="primary" size="mini" @click="visible = false">确定</el-button>
                </div>
                <el-button type="primary" slot="reference">取消关注</el-button>
            </el-popover>
        </div>
        <div>
            <el-row :gutter="50" type="flex" justify="center">
                <el-col :span="16">
                    <div>
                        <el-collapse style="height:200px;width:1000px">
                            <el-collapse-item title="用户介绍" name="1">
                                <div>用户名&nbsp;&nbsp;&nbsp;&nbsp; <el-tag>{{ user.username }}</el-tag>
                                </div>
                                <div>电话&nbsp;&nbsp;&nbsp;&nbsp; <el-tag>{{ user.phoneNumber }}</el-tag>
                                </div>
                                <div>注册时间&nbsp;&nbsp;&nbsp;&nbsp; <el-tag>{{ user.username }}</el-tag>
                                </div>
                                <div>性别&nbsp;&nbsp;&nbsp;&nbsp; <el-tag>{{ user.sex == 1 ? '男' : '女' }}</el-tag>
                                </div>
                                <div>介绍&nbsp;&nbsp;&nbsp;&nbsp; <el-tag>{{ user.introduce }}</el-tag>
                                </div>
                            </el-collapse-item>
                        </el-collapse>
                    </div>
                    <div>
                        <el-empty v-if="isShowEmpty" description="他还没有写文章呢"></el-empty>
                    </div>
                    <div v-for="(item, index) in article" :key="item.articleId" ref="attentionbutton"
                        style="border:1px black solid;margin:10px;position: relative;overflow:auto">
                        <div style="position:absolute;top:20px;left:15px;color: darkgray;">
                            <el-tag>{{ item.createTime }}</el-tag>
                            <el-tag>{{ item.viewCount }}</el-tag>
                        </div>
                        <div style="text-align:center">
                            <div>
                                <h1 class="articleTitle">{{ item.title }}</h1>
                            </div>
                            <div class="avatarAndUsername">
                                <el-avatar :src="item.avatar" style="margin-left:100px" size="medium"></el-avatar>
                                <span class="findUser">{{ item.username }}:</span>
                            </div>
                        </div>
                        <div class="content">
                            <div class="text more" ref="more">
                                占位
                            </div>
                            <div class="text">
                                <div :class="{ 'retract': item.status }"
                                    :style="{ 'max-height': item.status ? textHeight : '' }" ref="textContainer">
                                    <p v-html="item.content"></p>
                                </div>
                                <div class="btn">
                                    <p v-if="item.status" @click="item.status = false; updateViewCount(item.articleId)">
                                        展开</p>
                                    <p v-if="item.status == false" @click="item.status = true">收起</p>
                                </div>
                            </div>
                        </div>
                        <div>
                            <el-badge is-dot class="item">
                                <el-button size="small" @click="expansion(item.articleId)">评论</el-button>
                            </el-badge>
                            <el-badge is-dot class="item">
                                <el-button size="small" @click="expansion(item.articleId)">回复</el-button>
                            </el-badge>
                        </div>
                        <el-divider><i class="el-icon-mobile-phone"></i></el-divider>
                    </div>

                    <commentArticle ref="isShowCommentArticle" />
                </el-col>
            </el-row>
        </div>
    </el-container>
</template>

<script>
import commentArticle from '../component/commentArticle.vue';
import nagivation from '../component/nagivation.vue';
import api from '@/utils/api.js'
export default {
    data() {
        return {
            visible: true,
            src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
            squareUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
            show3: true,
            userId: 0,
            article: [],
            show: true,
            user: {},
            isShowEmpty: false
        }
    },
    components: {
        nagivation, commentArticle
    },
    watch: {
        'article': {
            handler(val, oval) {
                if (val.length < 1) {
                    this.getCommonArticle()
                }
            }
        }
    },
    methods: {
        getCommonArticle(userId) {
            console.log('userid', userId)
            if (userId > 0) {
                api.findOneUserArticle(userId).then(res => {
                    if (res.data.length > 0) {
                        this.article = res.data
                        this.user = res.user
                        this.isShowEmpty = false

                    } else {
                        this.isShowEmpty = true
                        this.user = res.user
                    }
                })
            }
        },
        updateViewCount(articleId) {
            api.updateArticleViewCount(articleId)
        },
        expansion(articleId) {
            if (articleId > 0) {
                api.findArticleComment(articleId).then(res => {
                    if (res.data.length > 0) {
                        this.$refs.isShowCommentArticle.commentList = res.data
                        this.$refs.isShowCommentArticle.articleId = articleId
                        this.$refs.isShowCommentArticle.isShowEmpty = false
                    } else {
                        this.$refs.isShowCommentArticle.commentList = null
                        this.$refs.isShowCommentArticle.articleId = articleId
                        this.$refs.isShowCommentArticle.isShowEmpty = true
                    }
                    this.$refs.isShowCommentArticle.drawer = true
                })

            } else {
                this.$message({
                    type: 'error',
                    message: '查看评论失败'
                })
            }
        },
        calculateText() {
            // 获取一行文字的height 计算当前文字比较列表文字
            if (this.article !== null && this.article.length > 0) {
                let oneHeight = this.$refs.more.scrollHeight
                let Height = this.$refs.more.offsetHeight
                let twoHeight = oneHeight * 2 || 60
                this.textHeight = `${twoHeight}px`
                let txtDom = this.$refs.textContainer
                for (let i = 0; i < txtDom.length; i++) {
                    let curHeight = txtDom[i].offsetHeight
                    if (curHeight > twoHeight) {
                        this.$set(this.article, i, Object.assign({}, this.article[i], { status: true }))
                    } else {
                        this.$set(this.article, i, Object.assign({}, this.article[i], { status: null }))
                    }
                }
            }
        },
        setUserId(userId) {
            console.log('setuserid接受了', userId)
            this.userId = userId
        }
    },
    mounted() {
        this.article.forEach((ele, index) => {
            this.$set(this.article, index, Object.assign({}, ele, {}))
        })
        // DOM 加载完执行
        this.$nextTick(() => {
            setTimeout(() => {
                this.calculateText()
            }, 1000)

        })

        window.onresize = () => {
            this.article.forEach((ele, index) => {
                this.$set(this.article, index, Object.assign({}, ele, {}))
            })
            setTimeout(() => {
                this.calculateText()
            }, 1000)
        }

    },
    beforeDestroy() {
        this.$bus.$off('getUserId')
    },
    created() {
        var that = this
        this.$bus.$on('getUserId', (userId) => {
            // console.log('接受了', userId)
            // that.userId = userId

            this.$nextTick(() => {
                this.getCommonArticle(userId)
                this.calculateText()
            })
        })
        // console.log('this.userid是', this.userId)
        // console.log('that.userid是', that.userId)

    }
}
</script>

<style scoped>
.findUser:hover {
    color: #b4b4b4;
}

.findUser {
    font-weight: 1000;
    display: inline-block;
    height: 36px;
    line-height: 36px;
    margin-left: 20px;
}

.avatarAndUsername {
    display: flex;
    justify-content: flex-start;
    margin-left: -80px;

}

.item {
    margin-left: 15px;
    margin-bottom: 10px;
    margin-top: -10px;
}

.content {
    display: flex;
    margin-bottom: 30px;
}

.text {
    position: relative;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 2px;
    color: #666666;
}

.retract {
    position: relative;
    overflow: hidden;
}

.retract:after {
    content: '...';
    position: absolute;
    bottom: 0;
    right: 2px;
    width: 25px;
    padding-left: 30px;
    background: linear-gradient(to right, transparent, #fff 45%);
}

.btn {
    position: absolute;
    right: 0;
    bottom: -30px;
    font-size: 14px;
    line-height: 19px;
    letter-spacing: 2px;
    color: #FFAD41;
    cursor: pointer;
}

.more {
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 2px;
    color: #666666;
    visibility: hidden;
}

.articleTitle:hover {
    color: cadetblue;
}
</style>